<%@ include file="../common/top.jsp"%>

<div id="Catalog">
    <form action="newAccount" method="post">
        <c:if test="${requestScope.newMsg != null}">
            <p> <font color="red">${requestScope.newMsg} </font> </p >
        </c:if>
        <h3>User Information</h3>

        <table>
            <tr>
                <td>User ID:</td>
                <lable for="username"></lable>
                <td> <input type="text" name="username" id="username"></td>
                <td><div id="usernameFeedback"></div></td>
            </tr>
            <tr>
                <td>New password:</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td><input type="password" name="rpassword" id="rpassword"></td>
                <td><div id="passwordFeedback"></div></td>
            </tr>
        </table>

        <%@ include file="includeAccountField.jsp"%>
        <p>
            Captcha:<input type="text" name="captcha" id="captcha" required> <br/>

            <img id="captchaImage" src="captcha" alt="Captcha Image">
            <a onclick="changeCode()">Can't see?</a >
            <script>
                function changeCode() {
                    var captchaImage = document.getElementById("captchaImage");
                    captchaImage.src = "captcha?" + new Date().getTime(); //使用新的时间戳作为查询参数来重新加载验证码图片
                }
            </script>
        </p >
        <input type="submit" name="newAccountForm" value="Save Account Information">

    </form>
    <script src="js/register.js"></script>

<%@ include file="../common/bottom.jsp"%>